<html>
<head>
<title>Simple Book Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" href="css/main.css">
<style>
	form { text-align: center; }
	.focusText { border:1px solid #FFFF88;background-color: #EEFFFF; }
	.inputTips { color:#888888}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$("#keywords").autocomplete({
		source: "AutocompleteBook",
		minLength: 3
	});
	
	$('#keywords').focus(function() {
		$('#keywords').addClass("focusText");
		 hideTips();
	});
	
	$('#keywords').blur(function() {
		$('#keywords').removeClass("focusText");
		showTips();		
	});
	
	function hideTips() {
		if ($('#keywords').val() == $('#keywords').attr('title')) {
			$('#keywords').val("");
			$('#keywords').removeClass("inputTips");
		}
	}
	
	function showTips() {
		if ($('#keywords').val() == "") {
			$('#keywords').val($('#keywords').attr('title'));
			$('#keywords').addClass("inputTips");
		}
	}
	
	showTips();
});

function validateInput() {
	if ($('#keywords').val() == "" || $('#keywords').val() == $('#keywords').attr('title')) {
		window.alert('Please input keywords');
		$('#keywords').focus();
		return false;
	}
}
</script>
</head>
<body>
<form action="search.jsp" method="POST" onSubmit="return validateInput();">
<jsp:include page="layout/logo.html" />
<br/>
<input id="keywords" name="w" type="text" value="" size="100" title="Please input keywords"/>
<input id="type" name="t" type="hidden" value="KEYWORDS"  /> 
<input type="submit" value="Go" />
</form>
</body>
</html>
